/*
 * 视频
 */

import * as React from 'react';

import { Spin } from 'antd';
import VideoPlayer from 'components/common/VideoPlayer';
import Selector from './Selector';

import makeHoc from 'components/common/makeHoc';

import { isLoading } from 'utils/utils';
import ACTIONS from 'constants/attachment';

const serviceType = 2;

interface VideoProps {
  dispatch: (action: any) => any;
  handleFetchAttachList: (obj: any) => any;
  handleCheckChange: () => any;
  loadingGroup: any;
  attachList: object[];
  selectedItems: object[];
  doSelect?: boolean;
  selectMax?: number;
}

interface VideoState {}

class Video extends React.Component<VideoProps, VideoState> {
  static defaultProps: VideoProps = {
    dispatch: () => {},
    handleFetchAttachList: () => {},
    handleCheckChange: () => {},
    loadingGroup: false,
    attachList: [],
    selectedItems: [],
    doSelect: false,
    selectMax: 0,
  };

  handleFetchVideoList = () => {
    this.props.handleFetchAttachList({ type: serviceType });
  };

  render() {
    const {
      loadingGroup,
      attachList,
      selectedItems,
      doSelect,
      selectMax,
      handleCheckChange,
    } = this.props;

    return (
      <Spin spinning={isLoading(loadingGroup, ACTIONS.FETCH_ATTACHMENT_LIST)} tip="Loading...">
        {attachList.length > 0 ? (
          <ul className="asset-card" style={{ padding: 0, listStyle: 'none' }}>
            {attachList.map((video: any) => {
              return (
                <li key={video.id} style={{ float: 'left', margin: '0 16px 16px 0' }}>
                  <VideoPlayer videoUri={video.uri} isTiny={true} />
                  <Selector
                    handleCallback={this.handleFetchVideoList}
                    onChange={handleCheckChange}
                    selectedItems={selectedItems}
                    item={video}
                    isCheck={!!doSelect}
                    selectMax={selectMax}
                  />
                </li>
              );
            })}
          </ul>
        ) : (
          <p className="loading-placeholder">还没有视频</p>
        )}
        <div className="clear-both" />
      </Spin>
    );
  }
}

function mapStateToProps(state: any) {
  const { loadingGroup } = state;
  const { attachList, selectedItems } = state.attachment;

  return {
    loadingGroup,
    attachList,
    selectedItems,
  };
}

export default makeHoc(mapStateToProps)(Video, {
  fetchVideoList(filter: any = {}) {
    this.handleFetchVideoList(filter, true);
  },
});
